<template>
<div class="tabbable-line {{bgColor? 'bg-'+bgColor:''}}">
    <ul class="nav nav-tabs ">
        <template v-for="t in headers">
            <li :class="{active: t.active, disabled: t.disabled}" >
                <a :href="'javascript:;'" class="{{bgColor? 'bg-'+bgColor:''}}" v-if="t.disabled">{{{t.header}}}</a>
                <a :href="'#'+t.id" class="{{bgColor? 'bg-'+bgColor:''}}" data-toggle="tab" v-else>{{{t.header}}}</a>
            </li>
        </template>
    </ul>
    <div class="tab-content {{bgColor? 'bg-'+bgColor:''}}" v-el:tab-content>
        <slot></slot>
    </div>
</div>

</template>
<script>
export default{
    props:{
        bgColor:{
            type: String,
            default: ''
        }
    },
    data(){
        return{
            headers:[],
            tabs:[],
        }
    },
    compiled(){
        let noactive = true
        for(let i = 0;i<this.$children.length;i++){
            console.log(this.$children[i].$el)

            this.headers.push({
                header: this.$children[i].header,
                active: this.$children[i].active,
                id: this.$children[i].id,
                disabled: this.$children[i].disabled
            })

            if(this.$children[i].active){
                noactive = false
            }
        }

        if(noactive){
           this.headers[0].active = true 
           this.$children[0].active = true
        }
    }
}
</script>